<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        li{
            width: 600px;
            margin: 10px 0px;
            padding: 10px;
            border: 1px solid #999;
            line-height: 10px;
        }
    </style>
    <script src="./jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            // 筛选
            // $('#list li').first().css('border', '5px solid #f00');
            // $('#list li').eq(3).css('border', '5px solid #f00');
            // $('#list li').eq(9).css('boeder', '5px solid #f00');

            // hasClass()
            console.log($('#list li').hasClass('item')); // true
            console.log($('#list li:eq(0)').hasClass('item')); // false
            // is()
            console.log($('#list li').is('.item'));
            console.log($('.item').is('p'));
            // map()
            // console.log($('#list li').html()); // innerHTML
            // console.log($('#list li').text()); // innerText
            console.log($('list li').map(function(){
                // alert('OK');
                // console.log(this); // JSDOM
                return $(this).text();
            }));

            // 查找
            // $('#list').childern().css('border', '5px solid #f00');
            // $('.item').parent().css('border', '5px solid #f00');

            // add()
            // $('#list p').add('.item,h1').css('border', '5px solid #f00');

            // andSelf() / addBack()
            // $('#list).children('li').addBack().css('border', '5px solid #f00');
            
            // end
            $('#list').children('li').end().css('border', '5px solid #f00');
        })
    </script>
</head>
<body>
    <h1 title="hhhh1">JQuery</h1>
    <hr>

    <div id="imglist">
        <img src="./imgs/1.ipg" alt="t1" width="201" height="300" title="pic1">
        <img src="./imgs/2.ipg" alt="t2" width="201" height="300" title="pic1">
        <img src="./imgs/3.ipg" width="200" height="300" title="img1">
        <img src="./imgs/4.ipg" alt="t4" width="200" height="300" title="img2">
        <img src="./imgs/5.ipg" alt="t1" width="205" height="300" title="tu1">
    </div>

    <ul id="list">
        <li>东 和我 去打游戏</li> 
        <li>西 和我 去跑步</li>
        <li>
            南 和我 去吃饭
            <ul>
                <li>东 和我 去打游戏</li>
                <li>西 和我 去跑步</li>
                <li>南 和我 去吃饭</li>
                <p class="item">我不是中</p>
                <li class="item">北 和我 去游泳</li>
                <li>东南 和我 去客厅</li>
                <li>西北 和我 去逛街</li>
            </ul>
        </li> 
        <li class="item">北 和我 去游泳</li>
        <li>东南 和我 去客厅</li>
        <li>西北 和我 去逛街</li>
    </ul>

    <hr>
    <ul>
        <li>东 和我 去打游戏</li> 
        <li>西 和我 去跑步</li>
        <li>
            南 和我 去吃饭
            <ul>
                <li>东 和我 去打游戏</li>
                <li>西 和我 去跑步</li>
                <li>南 和我 去吃饭</li>
                <p>我不是中</p>
                <li>北 和我 去游泳</li>
                <li>东南 和我 去客厅</li>
                <li>西北 和我 去逛街</li>
            </ul>
        </li> 
        <li>北 和我 去游泳</li>
        <li>东南 和我 去客厅</li>
        <li>
            西北 和我 去逛街
            <ul>
                <li>东 和我 去打游戏</li>
                <li>西 和我 去跑步</li>
                <li>南 和我 去吃饭</li>
                <p>我不是中</p>
                <li>北 和我 去游泳</li>
                <li>东南 和我 去客厅</li>
                <li>西北 和我 去逛街</li>
            </ul>
        </li>
    </ul>

    <hr>
    <ul>
        <li>东 和我 去打游戏</li>
        <li>西 和我 去跑步</li>
        <li>南 和我 去吃饭</li>
        <p>我不是中</p>
        <li>北 和我 去游泳</li>
        <li>东南 和我 去客厅</li>
        <li>西北 和我 去逛街</li>
    </ul>
</body>
</html>